<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>

  * {
    padding: 0;
    margin: 0;
  }

  .boxItem {
    width: 200px;
    height: 100px;
    position: relative;
    background: skyblue;
    top: 0;
    left: -200px;
  }

  span {
    padding: 20px 0;
    position: absolute;
    left: 200px;
    background: pink;
    border-radius: 0 5px 5px 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .boxItem span:hover {
    cursor: pointer;
  }

</style>
<body>
  <div class="boxItem">
    <span>分享</span>
  </div>


  <script>

    window.onload = () => {
      var box = document.querySelector(".boxItem");

      console.log("box", box);

      var timer = null;

      box.onmouseover = function () {
        startMove(0);
      };

      box.onmouseout = function () {
        startMove(-200)
      };

      function startMove(Maxstep) {
        clearInterval(timer);
        var step = 0;

        if(Maxstep < 0) {
          step = -10;
        } else {
          step = 10;
        };

        timer = setInterval(function() {
          
          var offsetleft = box.offsetLeft;

          if(offsetleft == Maxstep) {
            clearInterval(timer);
          } else {
            box.style.left = offsetleft + step + "px";
          }

          
        }, 17)
      }
    }

  </script>
</body>
</html>